<template>
  <div class="bus-list page">
    <div class="time-filter">
      <div class="white-block">
        <span class="name" >选择时间</span>
        <span class="time">{{dateStart}} -- {{dateEnd}}</span>
        <span v-if="dateStart" class="btn" @click="resetDate">重置</span>
        <span v-else class="btn" @click="dateShow=true">选择</span>
      </div>
    </div>
    <div v-if="top"  @click="showUsers" class="users">
      <div class="white-block">
      <span class="label">人员筛选</span>
      <span class="name">{{userName}}</span>
      <span class="btn" style="color: red" @click.stop="resetUser" v-if="userId">重置</span>
      <span class="btn" style="color: red" v-else>选择</span>
    </div>
    </div>
    <calendar mode="during"  @change="changeDate"  :show.sync="dateShow"  />
    <cube-scroll v-if="items.length>0">
    <div class="list" v-if="items">
      <div class="item" @click="toDetail(item.apply.id)" v-for="(item,index) in items" :key="item.apply.id">
        <div class="line">
          <span class="text">提交时间 : </span>
          <span class="value">{{parseTime(item.apply.time)}}</span>
        </div>
        <div class="line">
          <span class="text">出差事由 :</span>
          <textarea rows="4" disabled  :value="item.apply.info" class="area" name="" id=""  ></textarea>
        </div>
<!--        <div class="line">-->
<!--          <span class="text">开始时间 : </span>-->
<!--          <span class="value">{{parseTime(item.apply.startDate)}}</span>-->
<!--        </div>-->
<!--        <div class="line">-->
<!--          <span class="text">结束时间 : </span>-->
<!--          <span class="value">{{parseTime(item.apply.endDate)}}</span>-->
<!--        </div>-->
        <div class="line">
          <span class="text">总共时长 : </span>
          <span class="value">{{item.apply.hours}}小时</span>
        </div>
        <div class="line">
          <span class="text">申请人 :</span>
          <span class="value">{{item.user.name}}  {{item.user.mobile}}</span>
        </div>
        <div class="line">
          <span class="text">状态 :</span>
          <span class="value">{{statusEnum[item.apply.status]}}</span>
        </div>

        <div @click.stop="toCost(item.apply.id)" class="line" v-if="item.apply.status==1&&item.apply.userId==uid">
          <span class="text">报销 :</span>
          <span  class="value" style="color: red">点击申请</span>
        </div>

        <div class="line" v-if="item.apply.remark">
          <span class="text">拒绝原因 :</span>
          <textarea disabled  :value="item.apply.remark" class="area" name="" id=""  ></textarea>
        </div>
        <div class="btns" v-if="uid!=item.apply.adminId&&uid!=item.user.id&&item.apply.status===0">
          <div class="btn no" @click.stop="no(item.apply.id,index)">
            拒绝
          </div>
          <div class="btn yes" @click.stop="check(1,item.apply.id,index)">
            同意
          </div>
        </div>
      </div>
    </div>
    </cube-scroll>
    <div class="noData" v-else @click="back()">
        没有数据 点击返回>>
    </div>
  </div>
</template>

<script>
import { parseTime } from '../../../util/time'
import { checkBus, listBus, options } from '../../../api/apply'
import { showCorrect, showPrompt } from '../../../dialog'
import { mapState } from 'vuex'
import { gtBusUser } from '@/api/user'

export default {
  created () {
    if (this.$route.query.top) {
      this.top = parseInt(this.$route.query.top)
    } else {
      this.top = 0
    }
    options().then(res => {
      this.leaveOptions = res.data.leaveTypeOptions
    })
    this.type = parseInt(this.$route.query.type)
    if (this.top) {
      this.gtBusUser()
    }
    this.getBus()
  },
  computed: {
    ...mapState({
      uid: state => state.user.id
    })
  },
  methods: {
    toCost (busId) {
      this.$router.replace('/apply/cost/apply?busId=' + busId)
    },
    toDetail (id) {
      this.$router.push({
        path: '/apply/bus/apply',
        query: { id }
      })
    },
    gtBusUser () {
      gtBusUser().then(res => {
        this.users = res.data
      })
    },
    resetDate () {
      this.dateStart = null
      this.dateEnd = null
      this.getBus()
    },
    resetUser () {
      this.userId = null
      this.userName = null
      this.getBus()
    },
    showUsers () {
      const users = Object.keys(this.users).map(k => {
        const children = this.users[k].map(v => {
          const m = { text: v.name, value: v.id }
          return m
        })
        const r = { text: k, value: k, children }
        return r
      })
      if (!this.picker) {
        this.picker = this.$createCascadePicker({
          title: '选择用户',
          data: users,
          onSelect: this.selectUser
        })
      }
      this.picker.show()
    },
    selectUser (selectedVal, selectedIndex, selectedText) {
      this.userId = selectedVal[1]
      this.userName = selectedText[1]
      this.getBus()
    },
    getBus () {
      listBus(this.top, parseTime(this.dateStart), parseTime(this.dateEnd), this.userId).then(res => {
        if (!isNaN(this.type)) {
          this.items = res.data.filter(item => {
            return item.apply.type === this.type
          })
        } else {
          this.items = res.data
        }
      })
    },
    changeDate (dates) {
      if (dates.length === 2) {
        this.dateStart = dates[0].toDate().toLocaleDateString()
        this.dateEnd = dates[1].toDate().toLocaleDateString()
        this.dateShow = false
        this.getBus()
      }
    },
    back () {
      this.$router.back()
    },
    parseTime (time) {
      return parseTime(time, '{y}.{m}.{d} {h}:{i}:{s}')
    },
    autoScroll () {
      const scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0
      window.scrollTo(0, Math.max(scrollHeight - 1, 0))
    },
    no (id, index) {
      showPrompt('拒绝原因').then(res => {
        console.log(res)
        this.remark = res
        this.check(2, id, index)
      })
    },
    check (status, id, index) {
      checkBus(id, status, this.remark).then(res => {
        this.items[index].apply = res.data
        showCorrect('操作成功')
      })
    }
  },
  data () {
    return {
      userId: null,
      userName: null,
      top: null,
      type: null,
      dateShow: false,
      dateStart: null,
      dateEnd: null,
      leaveOptions: null,
      remark: null,
      items: [],
      statusEnum: ['待审核', '同意', '拒绝']
    }
  }
}
</script>

<style scoped lang="stylus">
  .bus-list
    background-color #F5F4F7
    padding 0 0
    .users
      padding 0 20px
      margin-top 10px
      .white-block
        padding 0 10px
        display flex
        align-items center
        justify-content space-between
        font-size 16px
        color #55545D
    .time-filter
      margin-top 20px
      padding 0 20px
      .white-block
        display flex
        align-items center
        justify-content space-between
        align-items center
        color #55545D
        font-size 16px
        padding 0 10px
        .btn
          color red
    .noData
      dpr-font(14Px)
      color #55545D
      display flex
      align-items center
      justify-content center
      height 100%
    .list
      padding 10px 20px
      padding-bottom 120px
      .item
        overflow hidden
        margin-top 10px
        padding 20px 20px 0 20px
        background:rgba(255,255,255,1);
        box-shadow:0px 3px 7px 0px rgba(89,88,87,0.52);
        border-radius:10px;
        .line
          display flex
          align-items flex-start
          margin-bottom 20px
          .text,.value
            dpr-font(14Px)
            color #55545D
          .text
            flex 0 0 80px
            margin-right 20px
          .area
            padding 0
            height auto
            color #55545D
            dpr-font(14Px)
            outline none
            border none
        .btns
          display flex
          align-items center
          justify-content space-between
          border-top 1Px solid #F5F4F7
          height 40px
          .btn
            display flex
            align-items center
            justify-content center
            width:80px;
            height:25px;
            background:rgba(89,142,254,1);
            box-shadow:0px 3px 7px 0px rgba(89,88,87,0.52);
            border-radius:10px;
            dpr-font(14px)
            color white
          .no
            background-color #009C4E

</style>
